@charset "utf-8";

@keyframes round {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes round {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
@-moz-keyframes round {
         from {
             transform: rotate(0deg);
         }
         to {
             transform: rotate(360deg);
         }
     }
@-o-keyframes round {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
html{
    font-size: 62.5%;
}

.container_xm{
    .full_w_h{
        width: 100%;
        height: 100%;
        padding: 0;
    }
    width: 100%;
    height: 100%;
    .page{
        width: 100%;
        height: 100%;
        margin-left: 0;
        margin-right: 0;
    }

//    page0
    .page0{
        background: url("../images/0_bg.png") no-repeat center center;
        background-size: cover;
        width: 100%;
        height: 100%;
        .header_xm{
            margin: 40px 40px 100px 40px ;

            a{
                img{
                    width: 200px;
                    margin-left: 0;
                }
            }

            span{
                font-size: 25px;
                color: #fff;
                text-align: end;
            }
        }

        .content_xm{
            align-content: center;
            .content_1{
                img{
                    height: 400px;
                    margin: auto;
                }
            }
            .content_2{
                h1,p{
                    color: #fff;
                    text-shadow: 0 3px 5px black;
                }
                p{
                    font-size: 25px;
                }
                h1{
                    font-size: 55px;
                }
                .download{
                    .btn_xm{
                        display: inline-block;
                        img{
                            width: 30px;
                            display: inline-block;
                            margin-right: 15px;
                        }
                    }
                    .btn{
                        background-color: #fe9b00;
                        border: none;
                        margin-top: 20px;
                        height: 58px;
                        width: 230px;
                        font-size: 24px;
                    }
                    .code{
                        display: inline-block;
                        width: 136px;
                        height: 136px;
                        vertical-align: bottom;
                        //background-color: #000;
                        //background: url("../images/downloadQR.png") no-repeat;

                        //background-size: cover;
                        //border-radius: 4.8px;
                        margin-left: 45px;

                        img{
                            width: inherit;
                            height: inherit;
                            border: 1px solid #9d9d9d;
                            border-radius: 4.8px;
                        }
                    }
                }

            }
        }

    }

//    page0_5
    .page0_5{
        background: #fff;
        .header_xm{
            span{
                color: #c81431 ;
            }
        }

        .content_xm{
            .content_2{
                p{
                    color: #000;
                    text-shadow: none;
                }
                h1{
                    color: #c81431;
                    text-shadow: none;
                }
                .download{
                    .btn{
                        background-color: #c81431;
                    }
                }
            }
        }
    }

//    page1
    .page1{
        //background-color: #ff9fe8;
        text-align: center;
        position: relative;

        .content_L{
            margin-top: 20%;
            h2{
                color: #c81431;
                font-size: 50px;
                text-align: left;
                padding-left: 100px;
                margin-bottom: 25px;
            }
            p{
                font-size: 25px;
                text-align: left;
                padding-left: 100px;
            }
        }
        .content_R{
            //margin: 25%;
            //position: relative;
            .round {
                width: 700px * 0.6;
                height: 700px * 0.6;
                position: relative;
                top: 50%;
                margin-top: 100px;
                left: 8%;
                z-index: -1;
                span {
                    animation: round 8s linear infinite;
                    -webkit-animation: round 8s linear infinite;
                    -moz-animation: round 8s linear infinite;
                    -o-animation: round 8s linear infinite;
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 50%;
                    left: 50%;
                    margin-top: -50%;
                    margin-left: -50%;
                    border: 1px solid #c81432;
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    -o-box-sizing:border-box;
                    box-sizing: border-box;
                    border-radius: 50%;
                    text-align: center;
                    i {
                        position: relative;
                        top: -10%;
                        display: inline-block;
                        border-radius: 50%;
                        background: #c81432;
                        width: 136px * 0.6;
                        height: 136px * 0.6;
                    }
                    &:nth-of-type(2) {
                        animation-delay: -2s;
                        -webkit-animation-delay: -2s;
                        -moz-animation-delay: -2s;
                        -o-animation-delay: -2s;
                        animation-duration: 6s;
                        -webkit-animation-duration: 6s;
                        -moz-animation-duration: 6s;
                        -o-animation-duration: 6s;
                        width: 80%;
                        height: 80%;
                        margin-top: -40%;
                        margin-left: -40%;
                        i {
                            width: 136px * 0.4;
                            height: 136px * 0.4;
                        }
                    }
                    &:nth-of-type(3) {
                        animation-delay: -6s;
                        -webkit-animation-delay: -6s;
                        -moz-animation-delay: -6s;
                        -o-animation-delay: -6s;
                        animation-duration: 10s;
                        -webkit-animation-duration: 10s;
                        -moz-animation-duration: 10s;
                        -o-animation-duration: 10s;
                        width: 60%;
                        height: 60%;
                        margin-top: -30%;
                        margin-left: -30%;
                        i {
                            width: 136px * 0.3;
                            height: 136px * 0.3;
                        }
                    }
                }
            }
            .person{
                width: 285px;
                height: 415px;
                position: absolute;
                margin-top: -85%;
                margin-left: 20%;
                z-index: 10;
            }
            .phone{
                width: 414px;
                height: 353px;
                position: absolute;
                margin-top: -45%;
                margin-left: 15%;
                z-index: 9;
            }
        }
    }

    //page2
    .page2{
        //background-color: #1b6d85;
        .content_L{
            margin-top: 5%;
            margin-left: 6%;
            img{
                height: 560px;
                margin: auto;
            }
        }
        .content_R{
            margin-top: 17%;
            h2{
                color: #c81431;
                font-size: 50px;
                text-align: right;
                padding-right: 100px;
                margin-bottom: 25px;
            }
            p{
                font-size: 25px;
                text-align: right;
                padding-right: 100px;
            }
        }
    }

    .page3{
        //background-color: #5e5e5e;
        .content_L{
            margin-top: 20%;
            h2{
                color: #c81431;
                font-size: 50px;
                margin-top: 0;
                text-align: left;
                padding-left: 100px;
                margin-bottom: 25px;
            }
            p{
                font-size: 25px;
                text-align: left;
                padding-left: 100px;
            }
        }
        .content_R{
            position: relative;
            text-align: right;
            text-align: -webkit-right;
            text-align: -moz-right;
            .person{
                //width: 285px;
                height: 450px;
                position: relative;
                margin-top: -61%;
                margin-left: -6%;
            }
            .phone{
                width: 370px;
                //height: 450px;
                position: relative;
                margin-top: 10%;
            }
        }
    }

    .page4{
        overflow: hidden;
        .content_L{
            margin-top: 10%;
            text-align: -webkit-center;
            .phone{
                height: 390px;
                position: relative;
            }
            .huan1{
                width: 500px;
                position: relative;
                margin-top: -90%;
            }
            .huan2{
                width: 400px;
                position: relative;
                margin-top: 15%;
            }
            .huan3{
                width: 500px;
                margin-top: -10%;
            }
            .dun{
                width: 140px;
                position: relative;
                margin-top: -73%;
            }
        }
        .content_R{
            margin-top: 17%;
            h2{
                color: #c81431;
                font-size: 50px;
                text-align: right;
                padding-right: 100px;
                margin-bottom: 25px;
            }
            p{
                font-size: 25px;
                text-align: right;
                padding-right: 100px;
            }
        }
    }



    //    响应式细调
    @media (max-width: 736px) {
        .page0{
            .header_xm{
                margin: 20px;
                img{
                    margin-bottom: 10px;
                }
                span{
                    font-size: 20px;
                    display: block;
                    text-align: center;
                }
            }
            .content_xm{
                margin-top: 20px;
                .content_1{
                    img{
                        height: 150px;
                    }
                }
                .content_2{
                    h1{
                        font-size: 30px;
                        text-align: center;
                    }
                    p{
                        font-size: 20px;
                        text-align: center;
                    }
                    .download{
                        margin-top: 30px;
                        text-align: center ;
                        .btn{
                            img{
                                width: 20px;
                                margin-right: 10px;
                            }
                            width: 150px;
                            font-size: 15px;
                            height: 40px;
                        }
                        .code{
                            height: 100px;
                            width: 100px;
                            margin-left: 0;
                        }
                    }
                }
            }
        }

        .page1{
            overflow: hidden;
            .content_L{
                margin: 10px;
                padding: 0;
                h2{
                    font-size: 30px;
                    padding: 0;
                    text-align: center;
                }
                p{
                    font-size: 18px;
                    padding: 0;
                    text-align: center;

                }
            }
            .content_R{
                .round{
                    width: 300px;
                    height: 300px;
                    margin-top: 50px;
                    span{
                        i{
                            width: 136px * 0.4;
                            height: 136px * 0.4;
                        }
                    }
                }
            }
        }

        .page2{
            //background-color: #1b6d85;
            .content_L{
                margin-top: 5%;
                img{
                    width: 270px;
                    height: 380px;
                }
            }
            .content_R{
                margin-top: 2%;
                h2{
                    font-size: 30px;
                    padding: 0;
                    text-align: center;
                }
                p{
                    font-size: 18px;
                    padding: 0;
                    text-align: center;
                }
            }
        }

        .page3{
            overflow: hidden;
            .content_L{
                margin-top: 15%;
                h2{
                    font-size: 30px;
                    padding: 0;
                    text-align: center;
                }
                p{
                    font-size: 18px;
                    padding: 0;
                    text-align: center;
                }
            }
            .content_R{
                .phone{
                    width: 250px;
                }
                .person{
                    height: 300px;
                }
            }
        }

        .page4{
            overflow: hidden;
            .content_L{
                margin-top: 20%;
                .phone{
                    height: 250px;
                }
                .huan1{
                    width: 300px;
                    margin-top: -305px;
                    margin-left: -6px;
                }
                .huan2{
                    width: 250px;
                }
                .huan3{
                    width: 300px;
                    margin-top: -5px;
                }
                .dun{
                    width: 90px;
                    margin-top: -267px;
                }
            }
            .content_R{
                margin-top: 60%;
                h2{
                    font-size: 30px;
                    padding: 0;
                    text-align: center;
                }
                p{
                    font-size: 18px;
                    padding: 0;
                    text-align: center;
                }
            }
        }
    }

}